<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-user-search">
				<el-form :model="tableData.param" ref="queryRef" :inline="true" size="default">
					<el-form-item label="产品名称" prop="name">
						<el-input
							v-model="tableData.param.name"
							placeholder="请输入产品名称"
							clearable
							maxlength="10"
							@keyup.enter.native="dataList"
							style="width: 180px"
						/>
					</el-form-item>
					<el-form-item>
						<el-button size="default" type="primary" class="ml10" @click="dataList">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
						<el-button size="default" @click="resetQuery(queryRef)">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重置
						</el-button>
						<el-button size="default" type="success" class="ml10" @click="onOpenAdd" v-auth="'api/v1/iot/product/add'">
							<el-icon>
								<ele-FolderAdd />
							</el-icon>
							新增
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-space wrap v-if="tableData.data.length > 0" style="height: 100%; overflow-y: auto" alignment="flex-start" fill :fill-ratio="20">
				<el-card v-for="(v, k) in tableData.data" :key="k" style="min-width: 200px" :body-style="{ padding: '0px 0px 20px 0px' }">
					<template #header>
						<el-row :gutter="20" align="middle" justify="center">
							<el-col :span="6">
								<img :src="productBg" width="100" height="100" />
							</el-col>
							<el-col :span="18">
								<el-row :gutter="20" align="middle" justify="center" style="height: 66px">
									<el-col :span="10" style="overflow: hidden; text-align: left">
										<div class="work-break" style="font-size: 18px; font-weight: bolder; width: 100px">
											{{ v.name }}
										</div>
									</el-col>
									<el-col :span="6" style="overflow: hidden; text-align: left">
										<div class="work-break" style="font-size: 10px; color: #9b9b9b; width: 60px">ID:{{ v.id }}</div>
									</el-col>
									<el-col :span="8" style="overflow: hidden; text-align: right">
										<el-switch
											v-model="v.state"
											class="ml-2"
											inline-prompt
											style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
											active-text="在线"
											inactive-text="离线"
											:active-value="1"
											:inactive-value="0"
											@change="editState(v.id, v.state)"
										/>
									</el-col>
								</el-row>
								<el-row :gutter="20" align="middle" justify="center">
									<el-col :span="24">
										<div style="font-size: 12px; color: #9b9b9b">注册时间：{{ v.createTimeStr }}</div>
									</el-col>
								</el-row>
								<el-row :gutter="20" align="middle" justify="center">
									<el-col :span="24">
										<div style="font-size: 12px; color: #9b9b9b; width: 180px" class="work-break">
											描述：
											<span v-if="v.describe != ''">{{ v.describe }}</span>
											<span v-else>无</span>
										</div>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</template>
					<div class="common-layout">
						<el-container>
							<el-main style="padding: 10px 6px">
								<div class="justify-between mb10" style="width: 100%; text-align: center">
									<div style="display: inline; width: 50%">设备数量</div>
									<div style="display: inline; width: 50%">发布状态</div>
									<div style="display: inline; width: 50%">产品类型</div>
								</div>
								<div class="justify-between" style="width: 100%; text-align: center">
									<div style="display: inline; width: 50%; word-break: break-all; color: #8f8e8e">
										<el-tag>0</el-tag>
									</div>
									<div style="display: inline; width: 50%; word-break: break-all; color: #8f8e8e">
										<el-tag type="success" v-if="v.state === 1">已发布</el-tag>
										<el-tag type="info" v-else>未发布</el-tag>
									</div>
									<div style="display: inline; width: 50%; word-break: break-all; color: #8f8e8e">
										<el-tag>{{ v.deviceTypeName }}</el-tag>
									</div>
								</div>
							</el-main>
							<el-divider style="margin: 15px 0" />
							<el-footer height="100%" style="text-align: center">
								<el-button-group>
									<el-button type="primary" :icon="View" @click="onOpenView(v)" v-auth="'api/v1/iot/product/get'" />
									<el-button type="primary" :icon="Edit" @click="onOpenEdit(v)" v-auth="'api/v1/iot/product/edit'" />
									<el-button type="primary" :icon="Delete" @click="onRowDel(v.id)" v-auth="'api/v1/iot/product/delete'" />
								</el-button-group>
							</el-footer>
						</el-container>
					</div>
				</el-card>
			</el-space>
			<el-empty v-else description="暂无数据"></el-empty>
			<el-divider style="margin: 10px 0" v-if="tableData.data.length > 0" />
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="dataList"
			/>
		</el-card>
		<EditProduct ref="editProductRef" @dataList="dataList" :dept-tree="deptTree" />
		<ViewProduct ref="viewProductRef" @dataList="dataList" :dept-tree="deptTree" />
	</div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
import EditProduct from '/@/views/iot/product/component/editProduct.vue';
import ViewProduct from '/@/views/iot/product/component/viewProduct.vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { Delete, Download, Edit, View } from '@element-plus/icons-vue';
import productBg from '/@/assets/iot/product.svg';
import { getDeptSelectTree } from '/@/api/system/dept';
import { deleteProduct, editProductState, getProductList } from '/@/api/iot/product';
import { deviceTypeList } from '/@/utils/iotdict.ts'; // 定义接口来定义对象的类型

// 定义接口来定义对象的类型
interface TableDataRow {
	name: string;
}

interface TableDataState {
	tableData: {
		data: Array<TableDataRow>;
		total: number;
		loading: boolean;
		param: {
			pageNum: number;
			pageSize: number;
			name: string;
		};
	};
	deptTree: any[];
	deviceTypeList: Array<object>;
}

export default defineComponent({
	name: 'productList',
	components: { EditProduct, ViewProduct },
	setup() {
		const { proxy } = getCurrentInstance() as any;
		const editProductRef = ref();
		const viewProductRef = ref();
		const queryRef = ref();
		const dlRefs: any = ref([]);
		const state = reactive<TableDataState>({
			tableData: {
				data: [],
				total: 0,
				loading: false,
				param: {
					pageNum: 1,
					pageSize: 10,
					name: '',
				},
			},
			deptTree: [],
			deviceTypeList,
		});
		// 页面加载时
		onMounted(() => {
			dataList();
			initDeptSelectTree();
		});
		// 初始化表格数据
		const initDeptSelectTree = () => {
			getDeptSelectTree().then((res: any) => {
				state.deptTree = res.data.deptTree;
			});
		};
		// 获取数据列表
		const dataList = () => {
			getProductList(state.tableData.param).then((res: any) => {
				let dataList = res.data.list;
				// 设备类型
				dataList.forEach((val: any) => {
					state.deviceTypeList.forEach((val1: any) => {
						if (val1.id === val.deviceType) {
							val.deviceTypeName = val1.name;
						}
					});
					val.createTimeStr = proxy.moment.unix(val.createTime).format('YYYY-MM-DD HH:mm:ss');
				});
				state.tableData.data = dataList;
				state.tableData.total = res.data.total;
			});
		};
		// 打开新增弹窗
		const onOpenAdd = () => {
			editProductRef.value.openDialog();
		};
		// 打开修改弹窗
		const onOpenEdit = (row: TableDataRow) => {
			editProductRef.value.openDialog(row);
		};
		// 打开查看弹窗
		const onOpenView = (row: TableDataRow) => {
			viewProductRef.value.openDrawer(row);
		};
		// 删除
		const onRowDel = (id: number) => {
			let msg = '你确定要删除所选数据';
			let ids: number[] = [];
			if (id) {
				ids.push(id);
			}
			if (ids.length === 0) {
				ElMessage.error('请选择要删除的数据');
				return;
			}
			ElMessageBox.confirm(msg, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					deleteProduct(ids).then(() => {
						ElMessage.success('删除成功');
						dataList();
					});
				})
				.catch(() => {});
		};
		// 重置按钮操作
		const resetQuery = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			formEl.resetFields();
			dataList();
		};
		// 改变状态
		const editState = (id: number, status: number) => {
			ElMessageBox.confirm('确定要发布/停用所选数据吗', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					editProductState(id, status)
						.then(() => {
							ElMessage.success('发布/停用成功');
							dataList();
						})
						.catch(() => {
							state.tableData.data.forEach((data: any) => {
								if (data.id === id) {
									if (status == 0) {
										data.state = 1;
									} else {
										data.state = 0;
									}
								}
							});
						});
				})
				.catch(() => {
					state.tableData.data.forEach((data: any) => {
						if (data.id === id) {
							if (status == 0) {
								data.state = 1;
							} else {
								data.state = 0;
							}
						}
					});
				});
		};
		return {
			productBg,
			editState,
			onOpenView,
			viewProductRef,
			resetQuery,
			editProductRef,
			queryRef,
			dlRefs,
			dataList,
			onOpenAdd,
			onOpenEdit,
			onRowDel,
			Delete,
			Edit,
			Download,
			View,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}

.justify-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.work-break {
	word-break: keep-all;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
